<template>
  <!-- Object.keys(goods).length 判断对象里的属性是否为空，即对象是否为空对象 -->
  <div v-if="Object.keys(playlist).length !== 0" class="base-info">
    <div class="info-name">{{playlist.name}}</div>
    <div class="info-desc">{{playlist.description}}</div>
    <div class="info-count">
      <span class="play-count">播放 {{playlist.playCount}}</span>
      <span class="subscribed-count">订阅 {{playlist.subscribedCount}}</span>
      <span class="share-count">分享 {{playlist.shareCount}}</span>
    </div>
    <div class="info-tags">
      <span class="info-tags-item" v-for="(item, i) in playlist.tags" :key="i">
        {{item}}
      </span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'DetailBaseInfo',
    props: {
      playlist: {
        type: Object,
        default() {
          return {}
        }
      }
    }
  }
</script>

<style scoped>
  .base-info {
    color: #000;
    border-bottom: 5px solid #eee;
    padding: 10px 5px 15px;
  }

  .info-desc {
    margin: 10px 0;
    color: var(--color-high-text);
    font-size: 13px;
  }

  .info-count {
    display: flex;
    justify-content: space-between;
    color: var(--color-text);
    font-size: 11px;
    border-bottom: 1px solid #eee;
    padding: 5px 0;
  }

  .info-tags {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding-top: 15px;
  }
</style>